<template>
  <div>
    <el-dialog
      :visible.sync="dialogShow"
      width="1000px"
      @close="dialogShow = false"
    >
      <el-row style="margin-bottom: 10px">
        <div>查阅试题</div>
      </el-row>
      <el-table :data="questionList" border>
        <el-table-column label="试题内容">
          <template slot-scope="scope">
            <el-row :gutter="20">
              <el-col
                ><div>ID:{{ scope.row.id }}</div></el-col
              >
              <el-col
                ><div>
                  题干信息:<a
                    class="html_p"
                    @click="questionShow(scope.row)"
                    v-html="scope.row.question"
                  /></div
              ></el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="5"
                ><div>归属学科:{{ scope.row.subject_name }}</div></el-col
              >
              <el-col :span="5"
                ><div>归属目录:{{ scope.row.directory_name }}</div></el-col
              >
              <el-col :span="5"
                ><div>
                  标签信息:<span
                    v-for="(item, index) in scope.row.tag_info"
                    :key="index"
                    >{{ item }}
                  </span>
                </div></el-col
              >
              <el-col :span="4"
                ><div>
                  发布状态:<el-tag
                    size="mini"
                    :type="scope.row.show_state === 1 ? 'success' : 'info'"
                    >{{ scope.row.show_state === 1 ? "上架" : "下架" }}</el-tag
                  >
                </div></el-col
              >
              <el-col :span="5"
                ><div>
                  发布时间:{{ scope.row.created_at | formatDate }}
                </div></el-col
              >
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <QusetionShow ref="questionShow" />
  </div>
</template>
<script>
import QusetionShow from "./questionShow.vue";
export default {
  name: "LookPaper",
  components: {
    QusetionShow,
  },
  data() {
    return {
      type: "",
      dialogShow: false,
      questionList: [],
    };
  },
  methods: {
    questionShow(data) {
      this.$refs.questionShow.dialogShow = true;
      this.$refs.questionShow.questionInfo = data;
    },
  },
};
</script>

<style>
::deep .el-dialog__header {
  width: 900px;
}
</style>
